Skip to content

feat: standardize tables to allow universal filtering, pagination, bulk actions and match the UI#1196

Merged
CodeWithCJ merged 3 commits intoCodeWithCJ:mainfrom
Sim-sat:feat-1050
Apr 25, 2026
Merged

feat: standardize tables to allow universal filtering, pagination, bulk actions and match the UI#1196
CodeWithCJ merged 3 commits intoCodeWithCJ:mainfrom
Sim-sat:feat-1050

Conversation

@Sim-sat
Copy link
Copy Markdown
Contributor

@Sim-sat Sim-sat commented Apr 24, 2026

Description

What problem does this PR solve?
I was integrating #1050 and then #705 and realized that splitting them is not the best idea. The problem was that every "table" like exercises, workout presets, plans, foods and meal basically do the same thing, but look different and have different code. this made it hard to work on them since they differ so much.

How did you implement the solution?
I was looking at this guide and copied the UI elements from Shadcn for the table and integrating tanstack table as a base. It allows to write fully custom tables. Now every tables allow to:

  • filter
  • pagination
  • bulk delete
  • csv export in the future?
  • double click an entry to open/edit

And it is easily expanded for other stuff too. Since the nutrients clutter up the mobile view I removed the custom ones from the main screen and added a modal that show all of them. This can be expanded in the future to show all variants for example. I changed the default page size to 5 on mobile so it doesnt take up so much space vertically.

For #705 I added the ability to fetch the food entries when deleting a food and show them in the frontend with a direct link and highlight of the entry.

Linked Issue:

How to Test

  1. Log food
  2. Delete food
  3. See deletion option and jump to the correct date in the diary and the food is highlighted

PR Type

  • Issue (bug fix)
  • New Feature
  • Refactor
  • Documentation

Checklist

All PRs:

  • [MANDATORY - ALL] Integrity & License: I certify this is my own work, free of malicious code, and I agree to the License terms.

New features only:

  • [MANDATORY for new feature] Alignment: I have raised a GitHub issue and it was reviewed/approved by maintainers or it was approved on Discord.

Frontend changes (SparkyFitnessFrontend/ or src/):

  • [MANDATORY for Frontend changes] Quality: I have run pnpm run validate and it passes.
  • [MANDATORY for Frontend changes] Translations: I have only updated the English (en) translation file.

Backend changes (SparkyFitnessServer/):

  • [MANDATORY for Backend changes] Code Quality: I have run typecheck, lint, and tests. New files use TypeScript, new endpoints have Zod schemas, and new endpoints include tests.
  • [MANDATORY for Backend changes] Database Security: I have updated rls_policies.sql for any new user-specific tables.

UI changes (components, screens, pages):

  • [MANDATORY for UI changes] Screenshots: I have attached Before/After screenshots below.

Screenshots

Selection with Bulk Actions

Selection with bulk actions

Desktop View

Before After
Foods
Foods Desktop Before
Foods
Foods Desktop After
Exercises
Exercise Desktop Before
Exercises
Exercises Desktop After

Mobile View

Before After
Foods
Mobile Foods Before
Foods
Foods Mobile After
Meal
Mobile Meal Before
Meals
Meals Mobile After
Exercises
Mobile Exercises Before
Exercises
Exercises Mobile After
Detail View Food
Detail View food After

Deletion

image

Which leads to this:

image

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request enhances the food deletion workflow by providing a detailed, collapsible list of diary entries where a food item is used, including deep links to view specific entries. It also introduces URL-based date selection and item highlighting in the diary view. Feedback focuses on improving type safety with type guards in MealCard.tsx, using the Link component for better SPA navigation, restoring internationalization and pluralization for usage counts, and cleaning up server-side data mapping where unselected fields were being processed.

Comment thread SparkyFitnessFrontend/src/pages/Diary/MealCard.tsx Outdated
Comment thread SparkyFitnessFrontend/src/pages/Foods/Foods.tsx Outdated
Comment thread SparkyFitnessFrontend/src/pages/Foods/Foods.tsx Outdated
Comment thread SparkyFitnessServer/models/food.ts
@Sim-sat Sim-sat force-pushed the feat-1050 branch 2 times, most recently from 0707388 to c821103 Compare April 24, 2026 06:34
@Sim-sat Sim-sat marked this pull request as draft April 25, 2026 06:33
@Sim-sat Sim-sat force-pushed the feat-1050 branch 4 times, most recently from 618f1e1 to 35a492c Compare April 25, 2026 08:36
@Sim-sat
Copy link
Copy Markdown
Contributor Author

Sim-sat commented Apr 25, 2026

/gemini review

@Sim-sat Sim-sat changed the title feat(1050): hightlight usage for food deletion feat: standardize tables to allow universal filtering, pagination, bulk actions and bring the UI feel closer Apr 25, 2026
@Sim-sat Sim-sat changed the title feat: standardize tables to allow universal filtering, pagination, bulk actions and bring the UI feel closer feat: standardize tables to allow universal filtering, pagination, bulk actions and match the UI Apr 25, 2026
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request refactors the exercise and food management interfaces by introducing a generic, mobile-responsive DataTable component and implementing bulk selection and deletion features across the application. The changes include new UI components for bulk actions, updated hooks for selection management, and enhanced backend logic for assessing food deletion impact. Review feedback highlights a regression in exercise list refreshing, a type mismatch in the bulk selection toolbar, and opportunities to improve code maintainability by refactoring duplicated logic and inconsistent confirmation dialogs.

Comment thread SparkyFitnessFrontend/src/pages/Exercises/Exercises.tsx
Comment thread SparkyFitnessFrontend/src/components/BulkActionToolbar.tsx
Comment thread SparkyFitnessFrontend/src/components/ui/DataTable.tsx
Comment thread SparkyFitnessFrontend/src/components/ui/DataTable.tsx Outdated
Comment thread SparkyFitnessFrontend/src/pages/Foods/MealPlanCalendar.tsx
@Sim-sat Sim-sat marked this pull request as ready for review April 25, 2026 08:53
@CodeWithCJ
Copy link
Copy Markdown
Owner

any reason support color was downgraded?
image

I will merge for now, but curious to know the reason.

@CodeWithCJ CodeWithCJ merged commit e3fddd9 into CodeWithCJ:main Apr 25, 2026
7 checks passed
@Sim-sat
Copy link
Copy Markdown
Contributor Author

Sim-sat commented Apr 25, 2026

any reason support color was downgraded? image

I will merge for now, but curious to know the reason.

I believe this happens when a new package requires the same dependecy so they agree on a version that both support to reduce duplication. And this is just for colored output to the terminal I believe

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants